<!DOCTYPE html>
<html>
<head>
    <title></title>
    <#include "/header.html">
    <style type="text/css">
        .selectCus {
            width: 100% !important;
        }

        .col-md-2-cus {
            width: 10% !important;
        }

        .col-md-2-cus2 {
            padding-right: 0px ! important;
            padding-left: 15px ! important;
            width: 13.66666667% !important;
        }

        .form-control-cus {
            padding: 0px !important;
        }

        .row {
            border-top: 0px dotted #ddd;
            margin: 0 0 15px 0;
            padding: 0px 2px 0px 2px;
        }

        .container {
            padding-right: 0px;
            padding-left: 0px;
            margin-right: auto;
            margin-left: auto;
        }

        .cus-select-width>.bootstrap-select {
            width: 100% ! important;
        }
        .el-dialog__body{padding: 0 20px}
        #rrapp{overflow-x: auto;}
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <div class="row">
                <div class="col-xs-4">
                    <el-select size="small" style="width: 100%" v-model="q.etlSystem" placeholder="作业系统名称" clearable filterable>
                        <el-option v-for="option in allsys"  :key="option.code" :label="option.name" :value="option.code"></el-option>
                    </el-select>
                </div>
                <div class="col-xs-4">
                    <el-select size="small" style="width: 100%" v-model="q.lastJobStatus" placeholder="作业状态" clearable filterable>
                        <el-option v-for="item in allstatus" :key="item.status" :label="item.status_desc" :value="item.status"></el-option>
                    </el-select>
                </div>
                <!--     <div class="form-group col-md-2 col-md-2-cus2">
                  <div id="lastTxDateStart" class="input-group date form_date col-md-12" data-date="" data-date-format="" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" value="" placeholder="起始数据日期" readonly onchange="getReqDateStart()">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                  </div>
                </div>
                <div class="form-group col-md-2 col-md-2-cus2">
                  <div id="lastTxDateEnd" class="input-group date form_date col-md-12" data-date="" data-date-format="" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" value="" placeholder="截止数据日期" readonly onchange="getReqDateEnd()">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                  </div>
                </div> -->
                <div class="col-xs-4">
                    <el-input v-model="q.etlJob" size="small" @keyup.enter="query(true)" placeholder="请输入要查询的作业名称" clearable></el-input>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <a class="btn btn-default btn-sm" @click="query"><i class="fa fa-search"></i> 查询 </a>
                    <a class="btn btn-primary btn-sm" @click="add" > <i class="fa fa-plus"></i>&nbsp;新增 </a>
                <a class="btn btn-primary btn-sm" @click="update"> <i class="fa fa-pencil-square-o"></i> &nbsp;修改 </a>
            <!--<a class="btn btn-primary disabled" @click="del"> &nbsp;删除 </a>-->

                      <a class="btn btn-warning btn-sm" id="uploadxls"><i class="fa fa-upload"></i>&nbsp;配置上传</a>
                      <a class="btn btn-warning btn-sm" id="batchconfigid" @click="batchconfig">&nbsp;校验配置</a>
            <a class="btn btn-primary btn-sm" id="epxortcfgid" @click="expconfig"><i class="fa fa-download"></i> &nbsp;导出配置 </a>
            <!--<a class="btn btn-primary" id="epxortcfgid" @click=""><i class="fa fa-download"></i> &nbsp;导出配置 </a>-->
            <a class="btn btn-primary btn-sm" @click="dependency"> &nbsp;上层依赖 </a>
            <a class="btn btn-primary btn-sm" @click="alldependency"> &nbsp;所有依赖 </a>
            <a class="btn btn-primary btn-sm" @click="analysis"> &nbsp;血缘影响分析 </a>

    </div>
</div>
</div>


<div>

</div>

<div style="padding: 0 10px">
    <el-table
            :data="dataPage.list"
            border
            size="small"
            height="452"
            :stripe="true"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="50">
        </el-table-column>
        <el-table-column
                label="序号"
                :formatter="colIndex"
                width="50"
                align="center">
        </el-table-column>
        <el-table-column
                prop="etlSystem"
                label="作业系统名称"
                :show-overflow-tooltip="true"
                align="center">
        </el-table-column>
        <el-table-column
                prop="etlJob"
                label="作业名称"
                :show-overflow-tooltip="true"
                align="center">
        </el-table-column>
        <el-table-column
                prop="description"
                label="描述"
                :show-overflow-tooltip="true"
                align="center">
        </el-table-column>
        <el-table-column
                prop="frequency"
                label="作业周期"
                :show-overflow-tooltip="true"
                align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.frequency == '0'" class="table-label-gb label-primary">日作业</span>
                <span v-else="" class="table-label-gb label-info">月作业</span>
            </template>
        </el-table-column>
        <el-table-column
                prop="enable"
                label="是否有效"
                :show-overflow-tooltip="true"
                align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.enable == 1" class="table-label-gb label-success">有效作业</span>
                <span v-else-if="scope.row.enable == 0" class="table-label-gb label-default">无效作业</span>
                <span v-else="" class="table-label-gb label-default">未知状态</span>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="dataPage.currPage"
            :page-size="dataPage.pageSize"
            :page-sizes="[10, 20, 30]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataPage.totalCount">
    </el-pagination>
</div>
</div>
<!--  第一部分新增配置作业基础信息------------------------------------------------------------------------------------------------ -->
<div v-show="!showList" class="panel panel-default">
    <div class="panel-heading">{{title}}</div>
    <form class="form form-horizontal">
        <div class="container">
            <label class="btn btn-default disabled" style="border: none; font-weight: 700;">配置作业基础信息</label>
            <div class="row clearfix" style="border-top: 1px dotted #ddd;">
                <div class="col-sm-12 column">
                    <div class="form-group">
                        <div class="col-sm-6">
                            <div class="col-sm-3 control-label">服务器名称</div>
                            <div class="col-sm-9 cus-select-width">
                                <el-select size="small" style="width: 100%" v-model="job.etlServer" placeholder="服务器名称">
                                    <el-option v-for="item in allServer" :key="item.code" :label="item.name" :value="item.code"></el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="col-sm-3 control-label">作业系统名称</div>
                            <div class="col-sm-9 cus-select-width">
                                <el-select size="small" style="width: 100%" v-model="job.etlSystem" placeholder="作业系统名称">
                                    <el-option v-for="item in allsys" :key="item.code" :label="item.name" :value="item.code"></el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-6">
                            <div class="col-sm-3 control-label">作业名称</div>
                            <div class="col-sm-9">
                                <el-input placeholder="作业名称" size="small" @blur="setDoScript();" v-model="job.etlJob"><template slot="append"><span id="upload" @click="uploadScript">导入</span></template></el-input>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="col-sm-3 control-label">描述</div>
                            <div class="col-sm-9">
                                <el-input v-model="job.description" size="small" placeholder="描述"></el-input>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-6">
                            <div class="col-sm-3 control-label">作业模板</div>
                            <div class="col-sm-9 cus-select-width">
                                <el-select size="small" style="width: 100%" v-model="job.publicScript" placeholder="作业模板" @change="getPublicScript();">
                                    <el-option v-for="item in doScripts" :key="item.code" :label="item.name" :value="item.code"></el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="col-sm-3 control-label">执行脚本</div>
                            <div class="col-sm-9">
                                <el-input v-model="job.runningscript" size="small" placeholder="执行脚本" readonly></el-input>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-6">
                            <div class="col-sm-3 control-label">是否生效</div>
                            <div class="col-sm-9">
                                <el-select id="enableid" size="small" style="width: 100%" v-model="job.enable" placeholder="请选择是否生效">
                                    <el-option key="0" label="失效" value="0"></el-option>
                                    <el-option key="1" label="有效" value="1"></el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="col-sm-3 control-label">作业状态</div>
                            <div class="col-sm-9">
                                <el-select size="small" style="width: 100%" v-model="job.lastJobstatus" placeholder="作业状态">
                                    <el-option v-for="item in allstatus" :key="item.status" :label="item.status_desc" :value="item.status"></el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-6">
                            <div class="col-sm-3 control-label">周期类型</div>
                            <div class="col-sm-9">
                                <el-select size="small" style="width: 100%" v-model="frequencyD" placeholder="请选择周期类型">
                                    <el-option key="0" label="日作业" value="0"></el-option>
                                    <el-option key="-1" label="月作业" value="-1"></el-option>
                                </el-select>
                                <input type="hidden" id="frequency" name="frequency" v-model="job.frequency" />
                            </div>
                        </div>
                        <div id="freqbox1" class="col-sm-6" v-if="frequencyD == '-1'">
                            <div class="col-sm-3 control-label">执行时间</div>
                            <div class="col-sm-9">
                                <el-select size="small" style="width: 100%" v-model="frequencyM" placeholder="作业状态">
                                    <el-option v-for="option in alldate" :key="option.value" :label="option.text" :value="option.value"></el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                </div>
                <!--  第二部分新增配置作业基础信息------------------------------------------------------------------------------------------------ -->
            </div>
            <div class="row clearfix" style="border-top: 1px dotted #ddd;">
                <div class="col-md-2 column" style="padding-right: 0px; width: 15.66666667%;">
                    <input type="button" class="btn btn-primary" @click="selectDependJobs" value="配置依赖作业" />
                    <br> <br>
                    <input type="button" class="btn btn-primary" @click="addTriggerJob" value="配置触发作业" />
                    <br> <br>
                    <input type="button" class="btn btn-danger" @click="removeDependJob" value="删除依赖作业" />
                </div>
                <div class="col-md-10 column" style="padding-left: 0px;">
                    <div class="form-group">
                        <el-table
                                :data="allDependPage.list"
                                border
                                size="small"
                                height="248"
                                :stripe="true"
                                style="width: 100%"
                                @selection-change="adHandleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="50">
                            </el-table-column>
                            <el-table-column
                                    label="序号"
                                    :formatter="adColIndex"
                                    width="50"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="etlSystem"
                                    label="作业系统"
                                    :show-overflow-tooltip="true"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="etlJob"
                                    label="作业名称"
                                    :show-overflow-tooltip="true"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="etlServer"
                                    label="服务器"
                                    :show-overflow-tooltip="true"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="description"
                                    label="描述"
                                    :show-overflow-tooltip="true"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="frequency"
                                    label="作业周期"
                                    :show-overflow-tooltip="true"
                                    align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.frequency == '0'" class="table-label-gb label-primary">日作业</span>
                                    <span v-else="" class="table-label-gb label-info">月作业</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="触发作业"
                                    :show-overflow-tooltip="true"
                                    align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.isTriggerJob == '1'" class="table-label-gb label-danger">是</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                :pager-count="5"
                                @size-change="adHandleSizeChange"
                                @current-change="adHandleCurrentChange"
                                :current-page="allDependPage.currPage"
                                :page-size="allDependPage.pageSize"
                                :page-sizes="[10, 20, 30]"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="allDependPage.totalCount">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确 定" />
            &nbsp;&nbsp;
            <input type="button" class="btn btn-warning" @click="reBack" value="返 回" />
        </div>
    </form>
</div>
<!-- 选择作业 -->

<el-dialog title="选择依赖作业" :visible.sync="selectJobLayer" :close-on-click-modal="false" width="80%">
    <el-row>
        <form class="form-inline">
            <div class="col-md-5">
                <el-select size="small" style="width: 100%" v-model="dependQ.etlSystem" placeholder="系统名称" clearable>
                    <el-option v-for="option in allsys" :key="option.code" :label="option.name" :value="option.code"></el-option>
                </el-select>
            </div>
            <div class="col-md-5">
                <el-input v-model="dependQ.etlJob" size="small" placeholder="作业名称"></el-input>
            </div>
        </form>
        <a class=" btn btn-primary" @click="reloadDependJobsSelect(true)"> 查询 </a>
    </el-row>
    <el-row style="margin-top: 10px">
        <el-table
                :data="dependJobsPage.list"
                border
                size="small"
                max-height="452"
                :stripe="true"
                style="width: 100%">
            <el-table-column
                    label="序号"
                    :formatter="djColIndex"
                    width="50"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="etlSystem"
                    label="作业系统"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="etlJob"
                    label="作业名称"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="描述"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="frequency"
                    label="作业周期"
                    :show-overflow-tooltip="true"
                    align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.frequency == '0'" class="table-label-gb label-primary">日作业</span>
                    <span v-else="" class="table-label-gb label-info">月作业</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="依赖添加"
                    :show-overflow-tooltip="true"
                    align="center">
                <template slot-scope="scope">
                    <a v-if="hadDepend(scope.row.id)"  style="color: #999">已添加</a>
                    <a v-else="" style="cursor: pointer" @click="addDependJob(scope.row)">添加</a>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :pager-count="5"
                @size-change="djHandleSizeChange"
                @current-change="djHandleCurrentChange"
                :current-page="dependJobsPage.currPage"
                :page-size="dependJobsPage.pageSize"
                :page-sizes="[10, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dependJobsPage.totalCount">
        </el-pagination>
    </el-row>
    <div slot="footer" class="dialog-footer">
        <a id="showSaveScript" class="btn btn-primary btn-sm" @click="selectJobLayer = false">确定</a>
        <a class="btn btn-default btn-sm" @click="selectJobLayer = false">取消</a>
    </div>
</el-dialog>
<!-- 血缘影响分析图 -->
<div id="analysisLayer" style="height:100%;width:100%;display:none;">
    <div style="height:40px;clear:both;">
        <el-form >
            <el-form-item label="显示">
                <el-row>
                    <el-col :span="17">
                        <el-radio-group v-model="showRadio" @change="setLayer">
                            <el-radio label="0">所有层</el-radio>
                            <el-radio label="1">邻近层</el-radio>
                        </el-radio-group>
                    </el-col>
                    <el-col :span="6" style="text-align: right">
                        <a class="btn btn-warning btn-sm" @click="back"> &nbsp;返回 </a>
                    </el-col>
                </el-row>

            </el-form-item>
        </el-form>

    </div>
    <div id="analysisChart" style="width:100%;height:calc(100% - 45px);overflow-x:auto;overflow-y: auto;"></div>
</div>
<!--重跑日期选择 -->
<div v-show="showQueryData" class='cus-p-diag'>
    <div class="panel panel-primary  cusdialog">
        <div class="panel-heading">{{title}}</div>
        <div class="form-horizontal">
            <div id="rerundateid" style='margin-left: 150px; margin-bottom: 30px; width: 300px;' class="input-group date form_date col-md-12" data-date="" data-date-format="" data-link-field="dtp_input2"
                 data-link-format="yyyy-mm-dd">
                <input class="form-control" size="16" type="text" value="" placeholder="重跑数据日期" readonly onchange="getRerunDate()">
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="rerun" value="确定" />
            &nbsp;&nbsp;
            <input type="button" class="btn btn-warning" @click="reBack2" value="返回" />
        </div>
    </div>
</div>
<!-- 按钮触发模态框 -----------------------------------------------------@click="loadlog"------>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document" style="width: 880px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel" style="color: #0f6ab4"> <p><span class="glyphicon glyphicon-print">&nbsp;作业日志详情</span></p>

                </h4>
            </div>
            <div class="modal-body" id="joblogdetail">
                <!--{{ joblogdetail }}-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" @click="logdload" >下载日志</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" @click="clearlog">关闭日志</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-------------------------------------------------------------------------->
</div>
<script src="${request.contextPath}/statics/libs/echarts/echarts.min.js"></script>
<script src="${request.contextPath}/statics/js/modules/etl/jobanalysis.js"></script>
<script src="${request.contextPath}/statics/js/modules/etl/job.js"></script>
<script src="${request.contextPath}/statics/libs/ajaxupload.js"></script>
<script>
    $(document)
        .ready(
            function() {
                var MaxInputs = 8; //maximum input boxes allowed
                var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
                var AddButton = $("#AddMoreFileBox"); //Add button ID

                var x = InputsWrapper.length; //initlal text box count
                var FieldCount = 1; //to keep track of text box added
                $(AddButton)
                    .click(
                        function(e) //on add input button click
                        {
                            if (x <= MaxInputs) //max input box allowed
                            {
                                FieldCount++; //text box added increment
                                //add input box
                                $(InputsWrapper)
                                    .append(
                                        '<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" class="removeclass"><input type="button" value="删除"></a></div>');
                                x++; //text box increment
                            }
                            return false;
                        });

                $("body").on("click", ".removeclass", function(e) { //user click on remove text
                    if (x > 1) {
                        $(this).parent('div').remove(); //remove text box
                        x--; //decrement textbox
                    }
                    return false;
                })

            });

    $('.form_date').datetimepicker({
        format : 'yyyy-mm-dd',
        language : 'zh-CN',
        weekStart : 1,
        todayBtn : 1,
        autoclose : 1,
        todayHighlight : 1,
        startView : 2,
        minView : 2,
        forceParse : 0,
        todayBtn : true,
        todayHighlight : true,
        startDate : 2018 - 01 - 01
    });

    /*             function getReqDateStart() {
     var dateval = $("#lastTxDateStart").find("input").val();
     vm.q.lastTxDateStart = dateval;
     }
     function getReqDateEnd() {
     var dateval = $("#lastTxDateEnd").find("input").val();
     vm.q.lastTxDateEnd = dateval;
     } */

    function getRerunDate() {
        var dateval = $("#rerundateid").find("input").val();
        vm.q.rerun_data_date = dateval;
    }

    function getSelectd() {
        var etlSystemSelect_obj = document.getElementById("etlSystemSelect");
        var index = etlSystemSelect_obj.selectedIndex;
        var select_value = etlSystemSelect_obj.options[index].value;
        vm.q.etlSystem = select_value;
    }

    function getSelectStatus() {
        var etlStatusSelect_obj = document.getElementById("etlStatusSelect");
        var index = etlStatusSelect_obj.selectedIndex;
        var select_value = etlStatusSelect_obj.options[index].value;
        vm.q.lastJobStatus = select_value;
    }

    function getEtlServerAddSelect() {
        //vm.job.etlServer =$("#etlServerAddSelect").val();
        vm.job.etlServer = $("#etlServerAddSelect").find("option:selected").text();
    }
    function getEtlSystemAddSelect() {
        //vm.job.etlServer =$("#etlServerAddSelect").val();
        vm.job.etlSystem = $("#etlSystemAddSelect").find("option:selected").text();
    }
    function getPublicScript() {
        var script = vm.doScripts.find(x=>{if(x.code == vm.job.publicScript) return x}).name
        var scriptId = vm.job.publicScript;
        // var index = script.lastIndexOf(".");
        // var end = script.substr(index, script.length);
        // vm.job.runningscript = vm.job.etlJob.toLocaleLowerCase() + "0100" + end;
        vm.job.runningscript = script;
        vm.job.scriptId = scriptId;
        if (isBlank(script) || isBlank(vm.job.etlJob)) {
            vm.job.runningscript = '';
        }
    }

    function getDependEtlSystem() {
        vm.dependQ.etlSystem = $("#dependEtlSystemid").find("option:selected").text();
    }

</script>
</body>
</html>
